<template>
  <section class="list-box" :style="{'max-height': maxHeight}">
    <div v-if="loading" class="loading-box">
      <i class="el-icon-loading" />
    </div>
    <div v-if="!loading && (listData === null || listData.length === 0)" class="none-box">
      <svg-icon class-name="none-icon" icon-class="none" />
      <i>暂无数据</i>
    </div>
    <div v-for="item of listData" :key="item.id">
      <!-- <section @click="handleShowDetail(item)"> -->
      <section @click="handleShowEditDetail(item)">
        <h3>
          <span @click.stop>
            <el-checkbox :checked="item.status === 3 || item.progress === 100" class="checkbox" @change="handleCheckboxChange($event, item)" />
          </span>
          <b :style="{color: item.status === 3 || item.progress === 100 ? '#909399' : '#303133'}">{{ item.name }}</b>
        </h3>
        <p style="margin-left: 24px;position:relative;">
          <span v-if="item.deadline_at && item.status !== 3" :style="{color: (new Date(item.deadline_at).getTime() - new Date().getTime() < 0) ? '#F56C6C' : '#909399;'}"><i class="el-icon-time" />{{ item.deadline_at | filterFormatTime2 }}</span>
          <span v-if="item.complete_at && item.status === 3"><i class="el-icon-time" />{{ item.complete_at | filterFormatTime }}</span>
          <el-divider v-if="item.deadline_at" direction="vertical" />
          <span><i class="el-icon-suitcase-1" />{{ item.project.name }}</span>
          <el-divider v-if="showReviewby" direction="vertical" />
          <span v-if="showReviewby">
            核查人: {{ showProgress ? item.review_by.nickname : item.review_by }}
          </span>
          <el-divider direction="vertical" />
          <span>
            <el-tag effect="light" size="mini" :type="item.status | golbalStatusFilter">
              {{ item.status | golbalStatusNameFilter }}
            </el-tag>
          </span>
          <el-divider direction="vertical" />
          <span>
            <el-tag effect="dark" size="mini" :type="item.priority | golbalPriorityFilter">
              {{ item.priority | golbalPriorityNameFilter }}
            </el-tag>
          </span>
          <span v-show="showProgress" class="progress">
            <p v-if="item.status === 3 || item.progress === 100">
              <i v-if="item.review_status" style="color: #67C23A">已核查</i>
              <i v-else>未核查</i>
              <i>，评分：{{ item.score }}</i>
            </p>
            <el-progress v-else :width="50" :percentage="item.progress" type="circle" />
          </span>
        </p>
      </section>
      <el-divider class="divider" />
    </div>

    <!-- <el-drawer
      :with-header="false"
      :size="'50%'"
      :visible.sync="ownDrawer"
      :direction="drawerDirection"
    >
      <DetailDrawer :detail.sync="detailData" />
    </el-drawer> -->
  </section>
</template>

<script>
import { formatTime, formatTime2 } from '@/utils/index'
// import DetailDrawer from '@/components/DetailDrawer'

export default {
  name: 'ListView',
  // components: { DetailDrawer },
  filters: {
    filterFormatTime(date) {
      return formatTime(date, '{m}-{d} {h}:{i}')
    },
    filterFormatTime2(date) {
      return formatTime2(date, '{m}-{d} {h}:{i}')
    }
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Array,
      default: () => { return [] }
    },
    showReviewby: {
      type: Boolean,
      default: false
    },
    showProgress: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: String,
      default: '30vh'
    }
  },
  data() {
    return {
      ownDrawer: false,
      drawerDirection: 'rtl',
      detailData: {}
    }
  },
  methods: {
    handleCheckboxChange(event, item) {
      this.$forceUpdate()
      this.$emit('updateCheckboxApi', event, item)
    },
    handleClickProgress(item) {
      this.$emit('updateProgress', item)
    },
    handleShowDetail(item) {
      this.ownDrawer = true
      this.detailData = item
    },
    handleShowEditDetail(item) {
      this.$emit('editUpdate', item)
    }
  }
}
</script>

<style lang="scss" scoped>
h3 {
  margin: 0;
  padding: 0;
  line-height: 2rem;
}
h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box; //作为弹性伸缩盒子模型显示。
  -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
  -webkit-line-clamp:2; //显示的行
}
p {
  margin-top: 12px;
}
i {
  margin-right: 3px;
}
span {
  color: #909399;
}
.checkbox {
  margin-right: 10px;
}
.list-box {
  overflow-y: auto;
}
.progress {
  cursor: pointer;
  position: absolute;
  top: -24px;
  right: 20px;
}
.loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.none-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  i {
    font-size: 12px;
    color: #909399;
  }
}
.none-icon {
  font-size: 5vw;
}
</style>
